<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h4>{{$store.state.counter}}</h4>
    <!-- 需要交由 vuedetools 进行管理, 不要直接访问 $store 的数据进行修改 -->
    <button @click="$store.state.counter++">+</button>
    <button @click="$store.state.counter--">-</button>

    <p>使用mutations:</p>
    <button @click="increment">+</button>
    <button @click="$store.commit('decrement')">-</button>

    <button type="button" @click="additional(5)">+5</button>
    <button type="button" @click="additional(10)">+10</button>

    <p>获取 getters: {{$store.getters.square}}</p>
    <p>获取 getters(传递参数): {{$store.getters.squareArg(20)}}</p>

    <p>修改对象属性</p>
    <button type="button" @click="updateInfo">修改对象属性</button>
    <p>{{$store.state.info}}</p>

    <hr>
    <p>module 的名称 : {{$store.state.a.name}}</p>
    <p>getters -&gt; {{$store.getters.fullName}}</p>
    <button type="button" @click="changeName">修改模块名称</button>

    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
  import * as type from '@/store/mutations-types'

  export default {
    name: "App",
    data: () => ({
      message: "计数器",
      counter: 0
    }),
    methods:{
      increment() {
        this.$store.commit(type.INCREMENT);
      },
      updateInfo() {
        // this.$store.commit('updateInfo'); // 同步
        this.$store.dispatch(type.AUPDATEINFO); // 异步
      },
      additional(num) {
        // this.$store.commit(type.ADDITIONAL, num); // 同步
        // this.$store.dispatch(type.ADDITIONAL, {
        //   payload: num,
        //   success: () => { // 添加回调函数
        //     console.log('添加', num, '成功');
        //   }
        // }); // 异步
        this.$store.dispatch(type.ADDITIONAL, num)
          .then(() => console.log('添加', num, '成功')); // 使用Promise 完成异步调用
      },
      changeName() {
        this.$store.commit('changeName'); // 最普通方式提交, 优先查找根模块, 然后在子模块查找, 都会调用
      }
    }
  }
</script>

<style>
</style>
